<?php require_once VIEWPATH.'Common/header.php'; ?>
<!-- header -->
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="<?=STATICURL?>css/item/item.css">
<?php require_once VIEWPATH.'Common/menu.php'; ?>
<!-- banner -->
<div class="contact">
<div >
     <img width="100%" src="<?=STATICURL?>images/item_banner.jpg" alt=""/>  
     </div>
    <div class="container">
        <div class='main'>
        <h3 class="main_title" >太初设计</h3>
          <div id="fh5co-portfolio-section">
              <ul id="filters" class="clearfix animate-box">
                <li><span class="filter active" data-filter=".all">全部</span></li>
                <?php foreach ($catList as $value):?>
                    <li><span class="filter" data-filter=".cat_<?=$value['cat_id']?>"><?=$value['cat_name']?></span></li>
                <?php endforeach;?>
              </ul>
              <div id="portfoliolist" class="animate-box">
              <?php foreach ($item_list as $key => $row): ?>
                <div class="portfolio all cat_<?=$row['categoryid']?>" data-cat="cat_<?=$row['categoryid']?>">
                  <div class="portfolio-wrapper">       
                    <img src="<?=UPLOADURL.$row['imageurl']?>" width="250" height="auto" alt="" />
                    <div class="label">
                      <div class="label-text">
                        <a class="text-title"><?=$row['name']?></a>
                      </div>
                      <div class="label-bg"></div>
                    </div>
                  </div>
                </div>    
                <?php endforeach;?>    
              </div>
          </div>
        </div>
    </div>
    <!-- <div class="clear"></div>
    <div id="moreload" class="more_btn">
      <div class="more_icon"></div>
      <span>更多</span>
    </div> -->
  </div>
<!-- footer -->
<?php require_once VIEWPATH.'Common/footer.php'; ?>
<!-- jQuery -->
  <script src="js/jquery.min.js"></script>
  <!-- jQuery Easing -->
  <!-- Bootstrap -->
  <!-- Waypoints -->
  <script src="<?=STATICURL?>js/item/jquery.waypoints.min.js"></script>
  <!-- Portfolio Filter Mixitup -->
  <script type="text/javascript" src="<?=STATICURL?>js/item/jquery.mixitup.min.js"></script>
  <script type="text/javascript">
  $(function () {
    var filterList = {
      init: function () {
        $('#portfoliolist').mixItUp({
          selectors: {
            target: '.portfolio',
            filter: '.filter' 
          },
          load: {
            filter: '.all'  
          }     
        });               
      }

    };
    filterList.init();
  }); 

$(".J_uploadPic").each(function(){
            if($(this).children().hasClass("active")){
                    default_arr.push("1");
            }else{
                default_arr.push("0");
            }
            original_arr.push($(this).attr("d-original"));
            ids_arr.push($(this).attr("data_id"));
        });


  $(".portfolio").each(function(index,item){
    if(index == 0 || index == 1 || index == 2){
      $(this).css("border-top"," 1px solid #dbdadc");
    }
    if(index%3 == 0){
      $(this).css("border-left"," 1px solid #dbdadc");
    }
  });
  </script>
